要在前端上實作簡易的資料繫結（資料綁定、Data Binfing），其實就只要透過 Object.defineProperty() 在 get() 和 set() 方法的設計。簡單來說，就是用 get() 取得網頁某個元素的資訊，然後用 set() 去更改他的資料。用個簡易的程式碼為例：

<div>
  <p>hello, <span id="targetName">world</span></p>
</div>

<script>
  'use strict'

  let data = {}

  Object.defineProperty(data, 'name', {
    get: function(){
        return document.getElementById('targetName').innerHTML;
    },
    set: function(value){
        document.getElementById('targetName').innerHTML = value
    }
  })

  console.log(data.name)
  data.name = 'ironman'
  console.log(data.name)

  // Console output:
  //   world
  //   ironman
</script>

這段程式碼最後會在頁面上顯示 hello, ironman 的文字。

這只是一個比較簡單的範例，在實際處理上可能會再有更多分層，而不是向本範例一樣直接修改 DOM。比如說資料可能就存在某個資料物件，get() 統一透過該物件去查詢，然後 set() 就是更新該資料物件，在去呼叫其他分層去統一更新介面的渲染之類的。一樣寫個簡單的程式碼為範例：

<div>
  <p>hello, <span id="targetName">world</span></p>
</div>

<script>
  'use strict'

  let _data = {}
  let data = {}

  Object.defineProperty(data, 'name', {
    get: function(){
        return _data.name
    },
    set: function(value){
      _data.name = value
      callSomethingToUpdateRender()
    }
  })

  data.name = 'ironman'
</script>

至於 Vue.js 實際上是怎麼實作的，明天我們再探討看看實際的原始碼吧。